<template>
  <div class="uploadApp" v-show="boolean">
    <div class="flex items-center">
      <svg-icon
        class="text-[20px] text-[#b1bad3] hover:text-white mr-2"
        name="关闭"
        @click="toggle"
      />
      <img @click="goHome()" class="logo_s" :src="main.logo" alt="logo" />
    </div>

    <el-button type="primary" class="w-[120px]" @click="upload"
      >upload app</el-button
    >
  </div>
</template>

<script lang="js" setup>
import { defineOptions, watch } from "vue";

import { mainAct } from "@/store/activeda";
import { useBoolean } from "@/hooks/useBoolean";
const main = mainAct();
const emit = defineEmits();
defineOptions({
  name: "uploadApp"
});

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});

const { boolean, toggle } = useBoolean(props.show);

const upload = () => {
  // 打开下载地址去下载
  if (process.env.NODE_ENV !== "production") {
    window.open(`http://localhost:5174/?ios=${JSON.stringify(main.download)}`);
  } else {
    window.open(
      `${main.download.customer_service}?ios=${JSON.stringify(main.download)}`
    );
  }
};

watch(
  () => props.show,
  val => {
    boolean.value = val;
  }
);
</script>

<style scoped lang="less">
.uploadApp {
  padding: 0 16px;
  position: fixed;
  width: 100%;
  height: 90px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo_s {
  width: 120px;
  height: 36px;
}
</style>
